<dialog id="export-dialog" class="export-dialog" aria-labelledby="export-title" aria-modal="true">
	<div class="export-header">
		<h3 id="export-title">Export palettes</h3>
		<button id="export-close" class="export-close" type="button" aria-label="Close export dialog">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="export-tabs" role="tablist" aria-label="Export format">
		{% set formats = [
		{ id: "hex", label: "Hex" },
		{ id: "hex-hash", label: "#Hex" },
		{ id: "rgb", label: "RGB" },
		{ id: "css", label: "CSS" },
		{ id: "json", label: "JSON" }
		] %}
		{% for format in formats %}
		{% set isActive = loop.first %}
		<button class="export-tab{% if isActive %} is-active{% endif %}" type="button" role="tab" aria-selected="{% if isActive %}true{% else %}false{% endif %}" aria-controls="export-output" id="export-tab-{{ format.id }}" data-format="{{ format.id }}" {% if not isActive %}tabindex="-1" {% endif %}>{{ format.label }}</button>
		{% endfor %}
	</div>
	<div class="export-body" id="export-panels">
	<div class="export-output-wrap">
		<pre class="export-output" id="export-output" role="tabpanel" aria-labelledby="export-tab-hex"></pre>
	</div>
	</div>
	<div class="export-copy">
		<button id="export-copy-fab" class="export-copy-button" type="button" aria-label="Copy export">
			<span class="copy-indicator copy-indicator-copy" aria-hidden="true">
				{% include "partials/icons/copy.njk" %}
			</span>
			<span class="copy-indicator copy-indicator-check" aria-hidden="true">
				{% include "partials/icons/check.njk" %}
			</span>
		</button>
	</div>
</dialog>
